<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例演示</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet" />
  </head>
  <body>
    <fieldset
      class="layui-elem-field layui-field-title"
      style="margin-top: 30px"
    >
      <legend>动画过程演示</legend>
    </fieldset>
    <div style="max-width: 1140px">
      <ul class="layui-border-box site-doc-icon site-doc-anim">
        <li>
          <div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
          <div class="code">layui-anim-down</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-downbit">
            微微往下滑入
          </div>
          <div class="code">layui-anim-downbit</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
          <div class="code">layui-anim-up</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-upbit">
            微微往上滑入
          </div>
          <div class="code">layui-anim-upbit</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
          <div class="code">layui-anim-scale</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-scaleSpring">
            弹簧式放大
          </div>
          <div class="code">layui-anim-scaleSpring</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-scalesmall">
            平滑放小
          </div>
          <div class="code">layui-anim-scalesmall</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">
            弹簧式放小
          </div>
          <div class="code">layui-anim-scalesmall-spring</div>
        </li>

        <li>
          <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
          <div class="code">layui-anim-fadein</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
          <div class="code">layui-anim-fadeout</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
          <div class="code">layui-anim-rotate</div>
        </li>
        <li>
          <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">
            循环动画
          </div>
          <div class="code">追加：layui-anim-loop</div>
        </li>
      </ul>
    </div>

    <!-- 注意：项目正式环境请勿引用该地址 -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>

    <script></script>
  </body>
</html>
